<template>
    <el-aside :width="store.isCollapse ? '64px' : '180px'" class="aside">
        <el-menu router default-active="2" class="el-menu-vertical-demo"
            background-color="#545c64" text-color="#fff" :collapse="store.isCollapse" :collapse-transition=false>
            <h3 >{{ store.isCollapse ? '后台' : '后台管理系统' }}</h3>
            <el-menu-item @click="clickMenu(item)" v-for="item in noChildren()" :key="item.path" :index="item.path">
                <component :is="item.icon" class="icons"></component>
                <span>{{ item.label }}</span>
            </el-menu-item>
            <el-sub-menu :index="item.path" v-for="item in hasChildren()" :key="item.path" >
                <template #title>
                    <el-icon>
                        <Edit />
                    </el-icon>
                    <span>{{ item.label }}</span>
                </template>
                <el-menu-item-group>
                    <el-menu-item v-for="subItem in (item.children)" :key="subItem.path" :index="subItem.path" @click="clickMenu(subItem)">
                        {{ subItem.label }}
                    </el-menu-item>
                </el-menu-item-group>
            </el-sub-menu>
        </el-menu>
    </el-aside>
</template>
  
<script setup>
import useStore from '../store/index.js';
const store = useStore();
const menu = JSON.parse(localStorage.getItem('menu') || '[]');
console.log(menu);
const noChildren = () => {
    return menu.filter((item) => !item.children);
}

const hasChildren = () => {
    return menu.filter((item) => item.children);
}
//从state中获取数据,使用时不用.value

const clickMenu = (item) => {
    store.updateBreadcrumb(item)
};

</script>
  
<style lang='scss' scoped>
.aside {
    height: 100%;
    background-color: #545c64;

    .el-menu {
        border: none;
        h3{
            line-height: 24px;
            color: #fff;
            text-align: center;
        }
    }
}

.icons {
    width: 18px;
    height: 18px;
}
</style>